
<template>
  <div class="father">
    <div class="Return">
      <i class="el-icon-arrow-left" @click="SignOut"></i>
    </div>
    <div class="box">
      <!-- 头部标题 -->
      <div class="title">
        <div class="RunningTime">
          <div class="envnt">
              <h2 >{{NameOfDevice.title}}</h2>
              <img src="../../assets/image/page/rotate.png" alt="" class="rotate">
          </div>
     
          <div class="Choice1">
            <router-link v-for="(item,index) in title" :key="index" :to="item.path" target="_blank">
              <a>{{item.name }}</a>
            </router-link>
          </div>
        </div>
        <div class="Mark">{{systemName}}</div>
        <div class="currenTtime">
          <h2>{{realTime}}</h2>
        </div>
      </div>
      <!-- 中间 -->
      <div class="Middle">
        <!-- 总概述 -->
        <div class="executiveSummary">
          <ul class="Num">
            <li>
              <div class="center">
                <h2>今日能耗</h2>
                <div>{{hourSumNum}}度</div>
              </div>
            </li>
            <li>
              <div class="center">
                <h2>月能耗</h2>
                <div>{{num}}度</div>
              </div>
            </li>
            <li>
              <div class="center">
                <h2>即时功耗</h2>
                <div>{{realTimeConsumption}}千瓦</div>
              </div>
            </li>
            <li>
              <div class="center">
                <h2 class="TheSum">{{NameOfDevice.NumberOfEquipment}}</h2>
                <div>{{count}}</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="map">
          <maps class="mps" :Meteorological="Meteorological"></maps>
        </div>
        <div class="Statistics">
          <div class="num" v-show="devType==0">
            <p>总数量:建筑类{{Architecture}}个</p>
            <p>桥体{{BridgeBody}}个</p>
          </div>
          <!-- 饼图 -->
          <div class="pie"></div>
     
          <div class="strategy">
            <div class="tips">运行策略</div>
            <div class="Roll strategyBox">
              <div>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="name" label="策略名称"></el-table-column>
                  <el-table-column prop="memo" label="描述" show-overflow-tooltip ></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 尾部 -->
      <div class="footer">
        <div class="Monitor">
          <div class="tips">当月能耗监测</div>
          <div class="charts"></div>
        </div>
        <div class="electric">
          <div class="tips">当日能耗监测</div>
          <div class="ElectricalStatistics"></div>
        </div>
        <div class="table">
          <div class="tips">故障告警统计</div>
          <div class="scrollBar2">
            <div class="Roll tableBox" ref="s" :class="{anim:animate==true}">
              <el-table :data="warning" style="width: 100%">
                <el-table-column prop="devName" label="设备名称"></el-table-column>
                <el-table-column prop="message" label="消息"></el-table-column>
                <el-table-column prop="time" label="时间"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import echarts from "echarts";
  import maps from "../map";
  import dg from "../../assets/image/Annular/dg.png";
  import dt from "../../assets/image/Annular/dt.png";
  import qx from "../../assets/image/Annular/qx.png";
  import xsp from "../../assets/image/Annular/xsp.png";
  import wifi from "../../assets/image/Annular/wifi.png";
  import pie1 from "../../assets/image/page/pie1.png";
  import pie2 from "../../assets/image/page/pie2.png";
  import pie3 from "../../assets/image/page/pie3.png";
  import pie4 from "../../assets/image/page/pie4.png";
  import pie5 from "../../assets/image/page/pie5.png";
  import pie6 from "../../assets/image/page/pie6.png";
export default {
  props: ["systemName", "NameOfDevice"],
  data() {
    return {
      animate: true,
      realTime: "",
      time: "",
      tableData: [],
      warning: [],
      realTimeConsumption: 0,
      num: 0,
      hourSumNum: 0,
      valueTime: [],
      start: "", //上个月时间
      end: "", //现在的时间
      data: "",
      TotalPowerTime: [],
      TotalPower: [],
      dayPowerTime: [],
      dayTotalPower: [],
      Architecture: 0, //建筑
      BridgeBody: 0,
      count: 0, //电箱的总数
      roll: 0,
      dayTime: "", //今天日期
      All: "", //定时器
      currenTtime: "",
      title: [
        {
          name: "路灯运营监控",
          path: "/lampPage"
        },
        {
          name: "气象传感器运营监控",
          path: "/MeteorologicalPage"
        } ,{
          name: "景观照明运营监控",
          path: "/loopPage"
        },{
            name: "充电桩展示页",
          path: "/ChargingPilePage"
        }
      ],
      devType: "",
      rotate:false,
      Meteorological:1
    };
  },
  components: {
    maps
  },
 
  methods: {
    enter(){
      this.rotate=true
    },
    enter2(){
        this.rotate=false
    },
    scroll() {
      this.roll = setInterval(() => {
        if (this.warning.length > 5) {
          this.warning.push(this.warning[0]);
          this.warning.shift();
        }
        if (this.tableData.length > 3) {
          this.tableData.push(this.tableData[0]);
          this.tableData.shift();
        }
      }, 2000);
    },
    star_end(e) {
      this.start = e[0];
      this.end = e[1];
      this.TotalConsumption();
    },
    SignOut() {
      this.$router.push("/steward");
    },
    // 实时时间
    dealWithTime() {
      var date_start = new Date(); //获取当前时间
      this.realTime =
        date_start.Format("yyyy-MM-dd hh:mm:ss") +
        " " +
        "星期" +
        "日一二三四五六".charAt(new Date().getDay());
    },
    pie(OwnershipBuilding, OwnershipBuildingName){
      var myChart = echarts.init(document.querySelector(".pie"));
      // 绘制图表
      myChart.setOption({
      title: {
          text: '实施项目的建筑属性比例图',
          x: 'left',
          textStyle: {
              color: "#fff",
              fontSize:20
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : 占比 ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          top: 50,
        itemWidth: 16, // 设置宽度
          itemHeight: 16, // 设置高度
          textStyle: {
            color: "#fff",
            fontSize:16
          },
          inactiveColor:"#606266",
          data:  [
                {
                  name:  OwnershipBuildingName[0]+" "+OwnershipBuilding[0].value+" 个",
                  icon: "image://" + pie1
                }, {
                  name: OwnershipBuildingName[1]+" "+OwnershipBuilding[1].value+" 个",
                  icon: "image://" + pie2
                },
                {
                  name: OwnershipBuildingName[2]+" "+OwnershipBuilding[2].value+" 个",
                  icon: "image://" + pie3
                },
                {
                  name: OwnershipBuildingName[3]+" "+OwnershipBuilding[3].value+" 个",
                  icon: "image://" + pie4
                },
                 {
                  name: OwnershipBuildingName[4]+" "+OwnershipBuilding[4].value+" 个",
                  icon: "image://" + pie5
                },
                 {
                  name: OwnershipBuildingName[5]+" "+OwnershipBuilding[5].value+" 个",
                  icon: "image://" + pie6
                }
          ],
          textStyle: {
            color: "#FFFFFF",
            fontWeight: 400,
            fontSize: 16
          }
        },
        series: [
          {
            name: "来源",
            type: "pie",
            radius: "70%",
            center: ["65%", "50%"],
            data:  
            [
              {
                value:OwnershipBuilding[0].value,
                name:OwnershipBuildingName[0]+" "+OwnershipBuilding[0].value+" 个"
              },
              {
                value:  OwnershipBuilding[1].value,
                name: OwnershipBuildingName[1]+" "+OwnershipBuilding[1].value+" 个"
              },
              {
                value: OwnershipBuilding[2].value,
                name:  OwnershipBuildingName[2]+" "+OwnershipBuilding[2].value+" 个",
              },
              {
                value: OwnershipBuilding[3].value,
                name: OwnershipBuildingName[3]+" "+OwnershipBuilding[3].value+" 个"
              },{
                value: OwnershipBuilding[4].value,
                name: OwnershipBuildingName[4]+" "+OwnershipBuilding[4].value+" 个"
              },{
                value: OwnershipBuilding[5].value,
                name: OwnershipBuildingName[5]+" "+OwnershipBuilding[5].value+" 个"
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "#0aecfb"
              },
              normal: {
                color: function(params) {
                  //自定义颜色
                  var colorList = [
                    "#4e5fd5",
                    "#0aecfb",
                    "#b636ec",
                    "#0000ff",
                    "#913030",
                    "#ffac38"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            label: {
              normal: {
                show: false
              }
            },
            lableLine: {
              show: true
            }
          }
        ]
      })
    },
    //平台管理建筑
    Annular(OwnershipBuilding, OwnershipBuildingName) {
      var myChart = echarts.init(document.querySelector(".pie"));
      // 绘制图表
      myChart.setOption({
       title: {
        text: '平台数量设备统计图',
        x: 'left',
         textStyle: {
            color: "#fff",
            fontSize:20
         },
      },
        tooltip: {
          trigger: "item",
          formatter: "{b}: 占比{d}%",
        },
        legend: {
          orient: "vertical",
          x: "left",
          top:50,
          itemWidth: 16, // 设置宽度
          itemHeight: 16, // 设置高度
          textStyle: {
            color: "#fff",
            fontSize:16
          },
          inactiveColor:"#606266",
          data: [
            {
              name:  OwnershipBuildingName[0]+" "+OwnershipBuilding[0].value+" "+"个",
              icon: "image://" + dt
            }, {
              name: OwnershipBuildingName[1]+" "+OwnershipBuilding[1].value+" 个",
              icon: "image://" + qx
            },
            {
              name: OwnershipBuildingName[2]+" "+OwnershipBuilding[2].value+" 个",
              icon: "image://" +xsp
            },
            {
              name: OwnershipBuildingName[3]+" "+OwnershipBuilding[3].value+" 个",
              icon: "image://" + wifi
            }
           
          ]
        },
         color:["#1cf3c1","#8d4615","#eedc5a","#5f31ad"],
        series: [
          {
            type: "pie",
            radius: ["48%", "70%"],
            center:["65%","50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "15",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
           
              {
                value:OwnershipBuilding[0].value,
                name:OwnershipBuildingName[0]+" "+OwnershipBuilding[0].value+" "+"个"
              },
              {
                value:  OwnershipBuilding[1].value,
                name: OwnershipBuildingName[1]+" "+OwnershipBuilding[1].value+" 个"
              },
              {
                value: OwnershipBuilding[2].value,
                name:  OwnershipBuildingName[2]+" "+OwnershipBuilding[2].value+" 个",
              },
              {
                value: OwnershipBuilding[3].value,
                name: OwnershipBuildingName[3]+" "+OwnershipBuilding[3].value+" 个"
              }
            ]
          }
        ]
      });
    },
    monitor(TotalPower, TotalPowerTime) {
      var myChart = echarts.init(document.querySelector(".charts"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },

        grid: {
          left: "6%",
          bottom: "0%",
          top: "12%",
          containLabel: true
        },

        xAxis: {
          name: "日期",
          type: "category",
          boundaryGap: false,
          data: TotalPowerTime,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff", //更改坐标轴文字颜色
              fontSize: 10 //更改坐标轴文字大小
            }
          },
          axisLine: {
            lineStyle: {
              color: "#fff" //更改坐标轴颜色
            }
          }
        },
        yAxis: {
          name: "度",
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff" //更改坐标轴颜色
            }
          },
          axisLine: {
            //y轴
            show: false,
            lineStyle: {
              color: "#fff" //更改坐标轴颜色
            }
          }
        },
        series: [
          {
            symbol: "none",
            name: "有功率(千瓦)",
            type: "line",
            data: TotalPower,
            color: "#fff",
            lineStyle: {
              normal: {
                color: "#fff"
              }
            }
          }
        ]
      });
    },
    // 每天
    electric(dayPowerTime, dayTotalPower) {
      var myChart = echarts.init(
        document.querySelector(".ElectricalStatistics")
      );
      // 绘制图表
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "7%",
          bottom: "0%",
          top: "12%",
          containLabel: true
        },
        xAxis: [
          {
            name: "小时",
            type: "category",
            data: dayPowerTime,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff", //更改坐标轴文字颜色
                fontSize: 10 //更改坐标轴文字大小
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: "#fff", //更改坐标轴颜色
                fontSize: 6
              }
            }
          }
        ],
        yAxis: [
          {
            name: "度",
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff", //更改坐标轴颜色
                fontSize: 6
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff", //更改坐标轴文字颜色
                fontSize: 10 //更改坐标轴文字大小
              }
            }
          }
        ],
        series: [
          {
            type: "bar",
            name: "度",
            barWidth: "60%",
            data: dayTotalPower,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function(params) {
                  var colorList = [
                    "#1b85e1",
                    "#11c6f6",
                    "#0aecfb",
                    "#2645e6",
                    "#11c6f6",
                    "#12adb7",
                    "#3c56dd",
                    "#1b85e1",
                    "#11c6f6",
                    "#0aecfb",
                    "#2645e6",
                    "#11c6f6",
                    "#12adb7",
                    "#3c56dd",
                    "#1b85e1",
                    "#11c6f6",
                    "#0aecfb",
                    "#2645e6",
                    "#11c6f6",
                    "#12adb7",
                    "#3c56dd",
                    "#1b85e1",
                    "#11c6f6",
                    "#0aecfb"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    },
    // 时间数组进行排序
    sortDataArray(dataArray) {
      return dataArray.sort(function(a, b) {
        return (
          Date.parse(a.time.replace(/-/g, "/")) -
          Date.parse(b.time.replace(/-/g, "/"))
        );
      });
    },
    // 获取上个月的
    getPreMonth(date) {
      var date_start = new Date(); //获取当前时间
      date_start.setDate(date_start.getDate()); //时间戳
      var dateYM = date_start.Format("yyyy-MM");
      this.start = dateYM + "-01" + " " + "00:00:00";
    },
    //获取当前时间
    current() {
      var date_start = new Date(); //获取当前时间
      date_start.setDate(date_start.getDate()); //时间戳
      this.currentTime = date_start.Format("yyyy-MM-dd"); //当前时间
      this.getPreMonth(this.currentTime + " " + "00:00:00");
    },
    // 月能耗
    TotalConsumption() {
      this.$http
        .get("/api/threesuns/stat/get_power_stat", {
          params: {
            groupids: null,
            start: this.start,
            devType: this.devType,
            imcType: this.devType
          }
        })
        .then(res => {
          let SortingTime = this.sortDataArray(res.data.daySum);
          let num = 0;
          let TotalPower = [];
          let TotalPowerTime = [];
          for (var i = 0, len = SortingTime.length; i < len; i++) {
            TotalPower.push(SortingTime[i].totalPower.toFixed(2));
            TotalPowerTime.push(SortingTime[i].time.split(" ")[0]);
            num += TotalPower[i] - 0;
          }
          this.num = num.toFixed(2);
          this.monitor(TotalPower, TotalPowerTime);
          TotalPower = [];
          TotalPowerTime = [];
        });
    },
    // 按小时的
    day() {
      this.$http
        .get("/api/threesuns/stat/get_power_stat", {
          params: {
            groupids: null,
            start: this.currentTime + " " + "00:00:00",
            imcType: this.devType,
            devType: this.devType
          }
        })
        .then(res => {
          if (res.data.hourSum.length != 0) {
            let SortingTime = this.sortDataArray(res.data.hourSum);
            let dayPowerTime = [];
            let dayTotalPower = [];
            for (var i = 0, len = SortingTime.length; i < len; i++) {
              dayPowerTime.push(SortingTime[i].time.split(" ")[1]);
              dayTotalPower.push(SortingTime[i].totalPower.toFixed(2));
            }
            this.electric(dayPowerTime, dayTotalPower);
            dayTotalPower = [];
            dayPowerTime = [];
          }
        });
    },
    // 今日能耗
    realTimePreMonth() {
      this.$http
        .get("/api/threesuns/stat/get_power_stat", {
          params: {
            start: this.currentTime + " " + "00:00:00",
            devType: this.devType,
            imcType: this.devType
          }
        })
        .then(res => {
          if (res.data.hourSum.length != 0) {
            this.hourSumNum = Math.trunc(res.data.daySum[0].totalPower);
          }
        });
    },
    // 功耗
    PowerWaste() {
      this.$http
        .get("/api/threesuns/stat/get_current_power_stat", {
          params: {
            devType: this.devType,
            imcType: this.devType
          }
        })
        .then(res => {
          this.realTimeConsumption = parseInt(res.data.data.currentPoser);
        });
    },
    // 环形 饼图图饼图数据请求
    ascription() {
      this.$http
        .get("/api/threesuns/stat/buildType/get", {
          params: {
            devType: this.devType
          }
        })
        .then(res => {
          let OwnershipBuilding = res.data.data;
          let OwnershipBuildingName = [];
          let num = 0;
          let BridgeBody = 0;
          for (let i = 0; i < res.data.data.length; i++) {
            OwnershipBuildingName.push(res.data.data[i].name);
            if (res.data.data[i].name != "桥体") {
              num += res.data.data[i].value;
            } else {
              BridgeBody += res.data.data[i].value;
            }
          }
          this.BridgeBody = BridgeBody;
          this.Architecture = num;
          if(this.devType==1){
             this.Annular(OwnershipBuilding, OwnershipBuildingName);
          }else {
            this.pie(OwnershipBuilding, OwnershipBuildingName)
          }

          
        });
    },
    // 告警的请求
    GiveAnAlarm() {
      this.$http
        .get("/api/threesuns/stat/loops/warn/get", {
          params: {
            devType: this.$route.path == "/lampPage" ? 1 : 0
          }
        })
        .then(res => {
          if (res.data.data) {
            this.warning = res.data.data.filter(v => {
              return v.isOnline == 0 ? (v.message = "离线") : v.message;
            });
          }
        });
    },
    // 获取设备总数
    ElectricBox() {
      this.$http
        .get("/api/threesuns/stat/elecBoxes/count", {
          params: {
            devType: this.devType
          }
        })
        .then(res => {
          this.count = res.data.data.count;
        });
    },
    //策略
    strategy() {
      this.$http.get("/api/threesuns/stat/apt/list/get").then(res => {
        if (res.data.data) {
          this.tableData = res.data.data;
        }
      });
    },
    settime() {
      this.All = setInterval(() => {
        this.current();
        this.realTimePreMonth();
        this.TotalConsumption();
        this.GiveAnAlarm();
        this.PowerWaste();
        this.ascription();
        this.strategy();
        this.day();
      }, 300000);
    },
    routerdevType() {
      this.devType = this.$route.path == "/lampPage" ? 1 : 0;
    }
  },
  created() {
    this.current();
    if(this.$route.path=="/lampPage"){
      this.Meteorological="单灯控制器"
    }else  if(this.$route.path=="/loopPage"){
      this.Meteorological="回路"
    }

  },
  mounted() {
    this.routerdevType();
    this.settime();
    this.realTimePreMonth();
    this.TotalConsumption();
    this.GiveAnAlarm();
    this.PowerWaste();
    this.ascription();
    this.strategy();
    this.day();
    this.ElectricBox();
    this.scroll();
    this.timer = setInterval(() => {
      this.dealWithTime();
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.roll) {
      clearInterval(this.roll);
    }
    if (this.All) {
      clearInterval(this.All);
    }
  }
};
</script>

<style scoped>
.father {
  width: 100%;
  height: 100%;
  background: #121212;
  overflow-y: auto;
  position: relative;
}
.Return {
  width: 30px;
  height: 30px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  position: fixed;
  z-index: 9999999999999;
}
.el-icon-arrow-left {
  color: #fff;
  font-size: 30px;
}
.box {
  width: 1823px;
  height: 100%;
  color: #fff;
  margin: 0 auto;
}
.title {
  height: 100px;
  background: #121212;
  display: flex;
  justify-content: space-around;
}
.RunningTime {
  width: 438px;
  float: left;
  height: 58px;
  background: url("../../assets/image/page/RunningTime.png") no-repeat;
  float: left;
  margin-top: 22px;
  font-size: 14px;
  text-align: center;
  line-height: 42px;
  font-weight: 600;
  position: relative;
}
.RunningTime img {
  position: absolute;
  right: 89px;
 top: 0;
 bottom: 0;
 margin: auto;
}

.Choice1 {
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  top: 49px;
  margin: auto;
  overflow: hidden;
  background-color: #121212;
  transition:all .5s;
  opacity: 0;
  border:2px solid #60f0fd;
  font-size: 18px;
}
.Choice1 a {
  display: block;
}
a {
  color: #fff;
}

.RunningTime:hover {
  cursor: pointer;
}

.RunningTime:hover .Choice1 {
  opacity: 1;

}

.RunningTime a {
  height: 30px;
  line-height: 30px;
}

.RunningTime a:hover {
  background-color: #02ccbd;
}

.RunningTime h2 {
  line-height: 58px;
}

.Mark {
  width: 442px;
  height: 58px;
  background: url("../../assets/image/page/title.png") no-repeat;
  float: left;
  margin-top: 22px;
  text-align: center;
  line-height: 58px;
  font-size: 30px;
  font-weight: 600;
}

.currenTtime {
  width: 442px;
  height: 70px;
  /* background: url("../../assets/image/page/title.png") no-repeat; */
  background: url("../../assets/image/page/RunningTime.png") no-repeat;
  float: left;
  margin-top: 22px;
  text-align: center;
  line-height: 60px;
}

.currenTtime h2 {
  font-size: 24px;
}

.RunningTime h2 {
  font-size: 24px;
}

.Middle {
  height: 605px;
  width: 100%;
}

.executiveSummary {
  width: 383px;
  height: 591px;
  float: left;
  position: relative;
}

.Num {
  width: 383px;
}

.center {
  position: absolute;
  right: 64px;
  top: 30px;
  text-align: center;
}

.center div {
  color: #02ccbd;
  font-size: 22px;
}

.Num h2 {
  font-size: 24px;
  font-weight: 400;
}

.Num li {
  background: url("../../assets/image/page/1.png") no-repeat;
  width: 383px;
  height: 149px;
  position: relative;
  margin-bottom: 4px;
}

.Num li:nth-child(2) {
  background: url("../../assets/image/page/2.png") no-repeat;
  width: 383px;
  height: 149px;
  position: relative;
}

.Num li:nth-child(2) .center {
  /* width: 100px; */
  position: absolute;
  left: 32px;
  top: 30px;
}

.Num li:nth-child(3) .center {
  text-align: right;
}

.Num li:nth-child(3) {
  background: url("../../assets/image/page/3.png") no-repeat;
}

.Num li:nth-child(4) {
  background: url("../../assets/image/page/4.png") no-repeat;
}

.Num li:nth-child(4) .center {
  width: 100px;
  position: absolute;
  left: 108px;
  top: 30px;
}

.map {
  width: 880px;
  height: 591px;
  float: left;
  margin-left: 58px;
  /* border: 3px solid #1d938d; */
}

.mps {
  margin-left: -3px;
  margin-top: -3px;
}

.Statistics {
  position: relative;
  width: 434px;
  height: 311px;
  float: left;
  background: url("../../assets/image/page/frame.png") no-repeat;
  margin-left: 58px;
  /* margin-top: 22px; */
  /* padding: 10px; */
}

.lamp {
  position: relative;
  float: left;
  background: url("../../assets/image/page/lamp.png") no-repeat;
  height: 591px;
  width: 440px;
  margin-left: 32px;
  margin-top: 5px;
}

.lamp .tips {
  padding-left: 20px;
  padding-top: 15px;
}

.pie {
  width: 416px;
  height: 284px;
  padding: 10px;
}

.num {
  position: absolute;
  left: 27px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  top: 245px;
}

.num p {
  text-align: center;
}

.text {
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 45px;
  font-size: 12px;
  font-weight: 600;
}

.strategy {
  width: 437px;
  height: 236px;
  background: url("../../assets/image/page/strategy.png") no-repeat;
  margin-top: 70px;
  padding: 10px;
  overflow: hidden;
}

.tips {
  font-size: 20px;
  font-weight: 600;
  margin-top: 5px;
  margin-left: 5px;
}

.Roll {
  margin-top: 5px;
  overflow: hidden;
}

.strategyBox {
  width: 408px;
  height: 175px;
  margin: auto;
}

/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #1d938d !important;
  color: #fff;
}

/deep/ .el-table__body tr:hover > td {
  background-color: #1d938d !important;
  color: #fff;
}

/deep/ .el-table__body tr.current-row > td {
  background-color: #1d938d !important;
}

/deep/ .el-table th,
.el-table tr,
/deep/ .el-table tr,
/deep/.el-pagination .btn-prev,
/deep/ .el-pagination .btn-next {
  background: #0d1615;
  color: #fff;
}

/deep/ .el-table td,
/deep/ .el-table th {
  text-align: center;
  padding: 9px 0;
}

/deep/ .el-table__empty-block {
  background: #0d1615;
}

/deep/ .el-table thead {
  color: #fff;
  font-weight: 400;
}

.footer {
  height: 320px;
  margin-top: 28px;
}

.Monitor {
  width: 435px;
  height: 315px;
  float: left;
  background: url("../../assets/image/page/frame.png") no-repeat;
  padding: 13px;
}

.Choice {
  margin-top: 15px;
  height: 30px;
}

.Choice_subbox {
  float: right;
  margin-right: 30px;
}

.charts {
  width: 400px;
  height: 255px;
}

.electric {
  width: 435px;
  height: 311px;
  float: left;
  margin-left:47px;
  background: url("../../assets/image/page/electric.png") no-repeat;
  padding: 10px;
}

.ElectricalStatistics {
  width: 400px;
  height: 255px;
}

.table {
  width: 855px;
  height: 312px;
  background: url("../../assets/image/page/fault.png") no-repeat;
  float: left;
  padding: 10px;
  margin-left: 49px;
}

.tableBox {
  width: 817px;
  margin: 0 auto;
}

.wrap {
  height: 185px;
  overflow-y: scroll;
}

.scrollBar {
  height: 160px;
  overflow-y: scroll;
}

.scrollBar::-webkit-scrollbar {
  width: 4px;
}

.scrollBar::-webkit-scrollbar-track {
  /* background: #ccc; */
  background: #011615;
}

.scrollBar::-webkit-scrollbar-thumb {
  background: #ccc;
}

.scrollBar2 {
  height: 247px;
  overflow: hidden;
}

.anim {
  transition: all 0.5s;
}

.show {
  text-align: center;
  line-height: 230px;
}

.Num .TheSum {
  white-space: nowrap;
}

/deep/ .el-table th.gutter {
    display: table-cell!important;
}
/deep/ .tableBox {

  width:   822px;
}
 .rotate {
  transition:all .5s;
 }
.RunningTime:hover .rotate {
  transform: rotate(180deg);
}
</style>
